/* <template>
  <div class="Gou">
    <!-- 头部 -->
    <div id="head" :class="{ bai }">
      <span class="span1">购物车</span>
      <a href="">
        <span class="span2">
          <i class="iconfont icon-shengyin"></i>
          <span>99元红包待领取</span>
          <span>X</span>
        </span>
      </a>
      <span class="span3" @click="guan">管理</span>
    </div>
    <div id="head" class="head1" v-show="flag">
      <span class="span1 car">购物车</span>
      <span class="kuo">（</span>
      <span class="kuo" v-html="msg"></span>
      <span class="kuo">）</span>
      <span class="span3" @click="guan">管理</span>
    </div>
    <!-- 地址栏 -->
    <div :class="{ ad: true, bai }">
      <span class="bao">
        共<small>{{ msg }}</small
        >件宝贝
      </span>
      <span class="local"
        >这里是地址的地方这里是地址的地方这里是地址的地方</span
      >
    </div>

    <!-- 盒子物品 -->
    <nav v-if="!bai">
      <!-- 热卖产品区 -->
      <div class="re">
        <!-- <input type="text"> -->
        <!-- 店铺信息 -->
        <div class="dian">
          <input
            type="checkbox"
            class="img"
            @click="ipt(isSelectAll)"
            v-model="isSelectAll"
          />
          <a href="">
            <!-- 自营 -->
            <span class="zhi">自营</span>
            <!-- 吊灯旗舰店 -->
            <span class="diao">吊灯旗舰店</span>
          </a>
        </div>
        <!-- 内容 -->
        <main v-for="(value, key) in shop" :key="key">
          <!-- 整体的内容  -->
          <div class="zheng" id="zheng">
            <!-- 按钮 -->
            <input
              type="checkbox"
              class="img"
              @click="iptChe($event, key)"
              v-model="value.isChecked"
            />
            <router-link to="/xiang" @click.native="sg(key)">
              <!-- 左边的图片 -->
              <div class="main_left">
                <img :src="value.shopSrc" alt="" />
              </div>
            </router-link>
            <!-- 右边的文字 -->
            <div class="main_right">
              <router-link to="/xiang" @click.native="sg(key)">
                <!-- 文字 -->
                <p>{{ value.shopFont }}</p>
              </router-link>
              <!-- 选择样式 -->
              <a href="">
                <div class="yan">
                  <span class="xuan">选择套餐:</span>
                  <span class="kuan">{{ value.addKuan }}</span>
                </div>
              </a>
              <!-- 钱 -->
              <span>{{ value.shopMoney }}</span>
              <!-- 增删操作 -->
              <div class="value">
                <i
                  class="iconfont icon-jianhao jian"
                  @click="value.shopCount > 1 ? value.shopCount-- : ''"
                ></i>
                <span id="qgs">{{ value.shopCount }}</span>
                <i
                  class="iconfont icon-jiahao jia"
                  @click="value.shopCount++"
                ></i>
              </div>
            </div>
          </div>
        </main>
      </div>
    </nav>

    <!-- 购物车为空 -->
    <div class="kong" v-show="bai">
      <div class="kong_bai"></div>
      <div class="iconfont icon-shopshoppingco img"></div>
      <p class="gou_wu">购物车竟然是空的</p>
      <p class="mang">在忙，也要来逛逛呀 ！</p>
      <p class="qu">去逛逛</p>
    </div>

    <you-love />

    <!-- 底部信息 -->
    <footer>
      <div>
        <span>店铺信息</span>
        <div class="xian"></div>
      </div>
    </footer>

    <!-- 结算版块 -->
    <div class="jie">
      <input
        type="checkbox"
        class="img"
        @click="ipt(isSelectAll)"
        v-model="isSelectAll"
        id="input"
      />
      <span class="quan">全选</span>
      <div class="jie_suan" v-show="jiesuan">
        <span class="he">合计:</span>
        <span class="qian">
          <span>￥</span>
          <span>{{ shopTota }}</span>
        </span>
        <router-link to="" @click.native="addContent">
          <span class="suan">结算</span>
        </router-link>
      </div>
      <div class="jie_suan" v-show="!jiesuan">
        <span class="san" @click="del2">删除</span>
      </div>
    </div>
    <!-- 删除的提示信息 -->
    <div id="ti" :class="{ op: op }" v-show="xs">
      <p>
        <span>确定将这</span>
        <span>{{ del_count }}</span>
        <span>个宝贝删除？</span>
      </p>
      <div class="bottom">
        <div class="left" @click="del1">我在想想</div>
        <div class="right" @click="del">删除</div>
      </div>
    </div>
    <!-- 删除0个提示信息 -->
    <div id="ti" v-show="!op1">
      <p class="kou">{{ content }}</p>
    </div>

    <!-- 遮罩层 -->
    <div :class="{ zhe }"></div>
    <!-- 向上的图标 -->
    <div class="top_tu" v-show="top" @click="shang">
      <span></span>
    </div>
    <!-- <Refresh /> -->
  </div>
</template>
<script>
import $ from "jquery";
// import "../assets/about.css";
import youLove from "@/components/youLove.vue";
import bus from "@/bus.js";
// import Refresh from "@/components/refresh.vue";
export default {
  data() {
    return {
      shop: [],
      page: 0,
      pageSize: 10,
      timers: null,
      totalPages: 1,
      myData: [],
      flag: false, //头部的显示隐藏
      msg: 0, //购买物品的数量
      bai: false, //购物车为空修改背景颜色
      // count: 1,//购买的数量
      jiesuan: true, //管理的开关
      // jiesuan1:true,//管理的开关
      total: 0, //总价钱
      qgs: 1,
      top: false, //置顶的图标
      shuling: 0, //存储数量
      op: true,
      op1: true,
      del_count: 0, //删除的个数
      content: "亲，请选择要删除的商品！",
      zhe: false, //遮罩层
      xs:false,//
    };
  },
  components: {
    youLove,
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
    // 加在完到顶部
    window.scrollTo(0, 0);
  
    // console.log(localStorage.getItem('username'));
    if(localStorage.getItem('username')==null){
      this.$router.push({path:"/reg"});
    }else{
      this.shop = this.$store.state.SHOP;
      // 方法用于将 JavaScript 值转换为 JSON 字符串
      localStorage.setItem('shop',JSON.stringify(this.shop));
    }

    //判断shop的长度
    // console.log(this.shop.length);
    if (this.shop.length == 0) {
      this.bai = true;
      $("#input").prop("checked", false);
    } else {
      this.bai = false;
    }
    // 宝贝的个数
    this.msg = this.shop.length;
  },
  updated(){
    localStorage.setItem('shop',JSON.stringify(this.shop));
  },
  methods: {
    sg(id) {
      // 第一种
      setTimeout(() => {
        bus.$emit("myHeader", {
          src: this.shop[id].shopSrc,
          title: this.shop[id].shopFont,
          money: this.shop[id].shopMoney,
        });
      }, 200);
    },
    //  管理显示隐藏
    handleScroll() {
      // 获取浏览器的长度
      var top = Math.floor(
        document.body.scrollTop ||
          document.documentElement.scrollTop ||
          window.pageYOffset
      );
      // console.log(top);
      //头部的显示隐藏
      top >= 30 ? (this.flag = true) : (this.flag = false);
      // 向上的图标显示
      top > 50 ? (this.top = true) : (this.top = false);
    },
    shang() {
      // 置顶
      $("html").animate(
        {
          scrollTop: 0,
        },
        200,
        "linear"
      );
    },
    // 管理按钮
    guan() {
      this.jiesuan = !this.jiesuan;
      // 点击管理获取勾选的个数
      this.del_count = 0;
      for (var i = 0; i < this.shop.length; i++) {
        if (this.shop[i].isChecked) {
          this.del_count++;
        }
      }
    },
    // 全选
    ipt(e) {
      // 改变isChecked的值取反
      for (var i = 0; i < this.shop.length; i++) {
        this.shop[i].isChecked = !e;
      }
      // 点击管理获取勾选的个数
      this.del_count = 0;
      for (var i = 0; i < this.shop.length; i++) {
        if (this.shop[i].isChecked) {
          this.del_count++;
        }
      }
    },
    // 单个选中状态
    iptChe(e, id) {
      // 改变isChecked的值传价格
      this.shop[id].isChecked = !this.shop[id].isChecked;
      // 点击管理获取勾选的个数
      this.del_count = 0;
      for (var i = 0; i < this.shop.length; i++) {
        if (this.shop[i].isChecked) {
          this.del_count++;
        }
      }
    },
    // 删除
    del() {
      var timer;
      clearTimeout(timer);
      // 删除个数
      for (var i = 0; i < this.shop.length; i++) {
        if (this.shop[i].isChecked == true){
          this.shop.splice(i, 1);
          i--;
         /*  var shop1= this.shop.filter((item,index)=>{
            return !index==i
          })
          shop1=JSON.stringify(shop1);
          console.log(shop1); */
        }
      }
      // console.log(this.shop);
      localStorage.setItem("shop",JSON.stringify(this.shop));

      
      $("#input").prop("checked", false);
      // console.log(this.shop.length);
      // 应藏头部
      if (this.shop.length == 0) {
        this.bai = true;
      }
      // 宝贝的个数
      this.msg = this.shop.length;

      // 隐藏删除界面
      timer = setTimeout(() => {
        //隐藏
        this.op = true;
        this.zhe = false;
        this.xs=false;
      }, 10);
    },
    del1() {
      // console.log(0);
      this.op = true;
      this.zhe = false;
      this.xs=false;
    },
    del2() {
      var timer;
      clearTimeout(timer);
      timer = null;
      // 要删除的个数
      var that = this;
      // this.del_count = 0;
      // console.log(this.del_count);
      for (var i = 0; i < this.shop.length; i++) {
        if (this.del_count != 0) {
          // this.del_count++;
          this.op = false;
          this.zhe = true;
          this.xs=true;
        } else {
          console.log(2222);
          this.op1 = false;
          this.zhe = true;
          this.content = "亲，请选择要删除的商品！";
          timer = setTimeout(function () {
            that.op1 = true;
            that.zhe = false;
          }, 1000);
        }
      }

      // localStorage.removeItem('shop');

    },
    // 添加数据
    addContent() {
      // this.diss=false;
      var timer;
      clearTimeout(timer);
      // 传数据
      for (var i = 0; i < this.shop.length; i++) {
        // console.log(this.shop[i].isChecked);
        if (this.shop[i].isChecked) {
          var contents = {
            shopSrc: this.shop[i].shopSrc,
            shopMoney: this.shop[i].shopMoney,
            shopCount: this.shop[i].shopCount,
            addKuan: this.shop[i].addKuan,
            shopFont: this.shop[i].shopFont,
            shopTotal: Number(this.shop[i].shopMoney.slice(1)),
            shopYou: 5,
            shopYun: 4,
            isChecked: true,
          };
          // console.log(contents);
          //调用store中的mutations将商品加入购物车
          this.$store.commit("aaContents", contents);
          this.$router.push("/Dingdan");
          // location.href="http://localhost:8080/#/Dingdan"
        } else {
          this.diss=true;
          // 购买提示显示
          this.op1 = false;
          this.zhe = true;
          this.content = "亲，你还没有选择商品哟！";
          var that = this;
          timer = setTimeout(function () {
            that.op1 = true;
            that.zhe = false;
          }, 1000);
        }
      }
      // console.log(contents);
      // }
    },
  },
  computed: {
    //动态的获取总价
    shopTota() {
      // 选中的就传出来
      var newShop = this.shop.filter((val) => {
        return val.isChecked;
      });
      // 总价
      var totals = 0;
      // 计算总价
      for (var i = 0; i < newShop.length; i++) {
        totals += newShop[i].shopTotal * newShop[i].shopCount;
      }
      return totals;
    },
    //检测是否全选
    isSelectAll: {
      // isselectall已分配给，但它没有setter
      get: function () {
        return this.shop.every((val) => {
          return val.isChecked;
        });
      },
      set: function () {},
    },
  },
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
a {
  // color: #444444 !important;
  text-decoration: none !important;
}
div {
  box-sizing: border-box;
}
.Gou {
  .head1 {
    background-color: #fff !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }
  #head {
    height: 40px;
    line-height: 40px;
    background-color: #f2f2f2;
    // 字体
    .span1 {
      color: #0d0d0d;
      font-size: 18px;
      margin: 0 0.266525rem;
      font-weight: 600;
      // float: left;
    }
    .car {
      margin: 0 0 0 160px;
    }
    .kuo {
      font-size: 14px;
      transform: translate(-7px, -2px);
      display: inline-block;
    }
    .span2 {
      color: #c4903b;
      background-color: #efebe5;
      border-radius: 15px;
      padding: 0 5px;
      i {
        display: inline-block;
        margin-right: 5px;
      }
      span {
        font-size: 0.319829rem;
        margin-right: 5px;
      }
    }
    .span3 {
      float: right;
      color: #0d0d0d;
      font-size: 18px;
      margin-right: 10px;
    }
  }
  // 购物车为空白色背景
  .bai {
    width: 100%;
    background-color: #fff !important;
  }
  // 地址
  .ad {
    font-size: 12px;
    margin: 0 10px 0px 0;
    height: 20px;
    padding: 0 10px 15px;
    span {
      float: left;
      margin-right: 0.266525rem;
      text-align: center;
      color: #747474;
    }
    .bao {
      display: inline-block;
      small {
        font-size: 13px;
      }
    }
    .local {
      display: inline-block;
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  // 盒子物品
  nav {
    margin: 0 6px;
    // 热卖产品区
    .re {
      padding-top: 5px;
      margin-top: 10px;
      // margin-top: 0.399787rem;
      width: 100%;
      // height: 500px;
      background-color: #fff;
      border-radius: 15px;
      // 店铺信息
      .dian {
        margin: 10px;
        font-size: 0.373134rem;
        // 选中的情况
        input {
          width: 13px;
          height: 13px;
          margin-right: 10px;
          position: relative;
          &::before {
            content: "";
            position: absolute;
            background: url("../../public/img/check.png") no-repeat;
            background-size: 100%;
            width: 15px;
            height: 15px;
            display: inline-block;
            top: -1px;
            left: -1px;
          }
        }
        // 未选中的状态
        input:checked {
          width: 13px;
          height: 13px;
          margin-right: 10px;
          position: relative;
          &::before {
            content: "";
            position: absolute;
            background: url("../../public/img/check1.png") no-repeat;
            background-size: 100%;
            width: 15px;
            height: 15px;
            display: inline-block;
            top: -1px;
            left: -1px;
          }
        }
        .zhi {
          margin: 0 0.266525rem 0 0;
          line-height: 5px;
          display: inline-block;
          border: 1px solid;
          // width: 43px;
          /* height: 15px; */
          text-align: center;
          transform: translateY(-3px);
          padding: 6px;
          line-height: 4px;
          border-radius: 15px;
          font-size: 12px;
        }
        .diao {
          display: inline-block;
          transform: translateY(-3px);
          font-weight: 550;
        }
        .diao::after {
          content: "";
          width: 8px;
          height: 8px;
          display: inline-block;
          border-top: 1px solid #c7c5c5;
          border-right: 1px solid #c7c5c5;
          transform: rotate(45deg);
          margin-left: 5px;
        }
      }
      // 内容
      main {
        padding: 10px 10px;
        width: 100%;
        // 整体的内容
        .zheng {
          width: 100%;
          height: 2.132196rem;
          // 选中的情况
          input {
            width: 13px;
            height: 13px;
            margin-right: 10px;
            position: relative;
            // margin-right: 10px;
            float: left;
            transform: translateY(28px);
            &::before {
              content: "";
              position: absolute;
              background: url("../../public/img/check.png") no-repeat;
              background-size: 100%;
              width: 15px;
              height: 15px;
              display: inline-block;
              top: -1px;
              left: -1px;
            }
          }
          // 未选中的情况
          input:checked {
            width: 13px;
            height: 13px;
            margin-right: 10px;
            position: relative;
            // margin-right: 10px;
            float: left;
            transform: translateY(28px);
            &::before {
              content: "";
              position: absolute;
              background: url("../../public/img/check1.png") no-repeat;
              background-size: 100%;
              width: 15px;
              height: 15px;
              display: inline-block;
              top: -1px;
              left: -1px;
            }
          }
          // 左边的图片
          .main_left {
            width: 1.865672rem;
            height: 1.865672rem;
            float: left;
            border: 1px solid#e5e5e5;
            border-radius: 6px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          // 右边的文字
          .main_right {
            width: 68%;
            float: left;
            padding-left: 0.399787rem;
            font-size: 13px;
            line-height: 30px;
            position: relative;
            p {
              color: #353535;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .yan {
              background-color: #f8f8f8;
              width: 93%;
              /* width: 320px; */
              height: 18px;
              border-radius: 4px;
              span {
                color: #b9b9b9;
                top: 23px;
                font-size: 13px;
              }
              .xuan {
                left: 22px;
              }
              .kuan {
                left: 80px;
              }
              .kuan::after {
                content: "";
                width: 5px;
                height: 5px;
                border-bottom: 1px solid #c3c3c3;
                border-right: 1px solid #c3c3c3;
                display: inline-block;
                transform: rotate(45deg) translate(2px, -7px);
              }
            }
            span {
              float: left;
              font-size: 16px;
              color: #b1843b;
              font-weight: 500;
              position: absolute;
              top: 44px;
            }
            // 进行增加删除操作
            .value {
              width: 60px;
              float: right;
              font-weight: 600;
              position: absolute;
              top: 44px;
              right: 5px;
              i {
                color: #b1843b;
                font-size: 19px;
              }
              .jian {
                float: left;
              }
              .jia {
                float: right;
              }
              span {
                display: inline-block;
                width: 22px;
                text-align: center;
                line-height: 27px;
                position: absolute;
                top: 0;
              }
            }
          } //main_right
        }
      } //main
    }
  } //nav

  .kong {
    height: 270px;
    .kong_bai {
      height: 30px;
      background-color: #fff;
      margin-bottom: 10px;
    }
    .img {
      width: 100px;
      height: 100px;
      font-size: 95px;
      margin: 0 auto 10px;
      color: #d8ad6a;
      text-align: center;
      line-height: 100px;
    }
    p {
      text-align: center;
      font-size: 16px;
    }
    .mang {
      margin-top: 10px;
      font-size: 12px;
      color: #a3a3a3;
    }
    .qu {
      font-size: 14px;
      border: 1px solid #e5e5e5;
      width: 80px;
      margin: auto;
      padding: 8px 0;
      transform: translateY(10px);
    }
  }

  /* 底部信息 */
  footer {
    width: 100%;
    height: 200px;
    margin-top: 1.332623rem;
    background-color: #efeff4;
    div {
      width: 80%;
      margin: auto;
      text-align: center;
      line-height: 2.665245rem;
      font-size: 16px;
      color: #b7b7b9;
      position: relative;
      span {
        display: inline-block;
        background-color: #efeff4;
        position: relative;
        z-index: 2;
        width: 85px;
      }
      .xian {
        width: 100%;
        border-top: 1px solid #d3d3d4;
        position: absolute;
        top: 50%;
        margin: auto;
      } //footer
    }
  }
  /* 结算版块 */
  .jie {
    .dis {
      pointer-events: none;
      cursor: not-allowed;
    }
    width: 100%;
    height: 1.332623rem;
    background-color: #fff;
    position: fixed;
    bottom: 49px;
    left: 0;
    right: 0;
    padding: 0 0.399787rem;
    line-height: 50px;
    z-index: 5;
    border-bottom: 1px solid #f0e9e9;
    // 选中的情况
    input {
      width: 13px;
      height: 13px;
      margin-right: 10px;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        background: url("../../public/img/check.png") no-repeat;
        background-size: 100%;
        width: 15px;
        height: 15px;
        display: inline-block;
        margin-right: 10px;
        transform: translateY(3px);
        top: -4px;
        left: -1px;
      }
    }
    // 未选中的状态
    input:checked {
      width: 13px;
      height: 13px;
      margin-right: 10px;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        background: url("../../public/img/check1.png") no-repeat;
        background-size: 100%;
        width: 15px;
        height: 15px;
        display: inline-block;
        margin-right: 10px;
        transform: translateY(3px);
        top: -4px;
        left: -1px;
      }
    }

    .quan {
      color: #969696;
      font-size: 13px;
    }
    .jie_suan {
      float: right;
      // border: 1px solid red;
      .he {
        color: #393f42;
      }
      .qian {
        color: #b1843b;
      }
      .suan {
        padding: 10px 30px;
        background: linear-gradient(to bottom, #f5c16a, #c4903b);
        border-radius: 20px;
        font-size: 14px;
        color: #fff;
        margin-left: 10px;
      }
      // 删除
      .san {
        padding: 8px 20px;
        border-radius: 20px;
        border: 1px solid #fc7276;
        font-size: 14px;
        color: #fc7276;
        margin-left: 10px;
      }
    }
  }
  // 置顶图标
  .top_tu {
    width: 1.066098rem;
    height: 1.066098rem;
    border: 0.026652rem solid transparent;
    position: fixed;
    bottom: 120px;
    right: 15px;
    border-radius: 20px;
    background: rgba(151, 113, 37, 0.2);
    text-align: center;
    /* line-height: 15px; */
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      display: inline-block;
      width: 15px;
      height: 15px;
      border-left: 2px solid #977125;
      border-top: 2px solid #977125;
      transform: rotate(45deg);
      margin-top: 6px;
    }
  }
  // 提示信息
  #ti {
    position: fixed;
    width: 260px;
    height: 100px;
    bottom: 50%;
    left: 50%;
    z-index: 100;
    background-color: #fff;
    transform: translate(-50%);
    line-height: 46px;
    font-size: 15px;
    text-align: center;
    border-radius: 15px;
    transition: all 0.3s linear;
    z-index: 1100;
    p {
      color: #474747;
      line-height: 60px;
    }
    .kou {
      line-height: 100px;
    }
    // 下面的内容
    .bottom {
      display: flex;
      line-height: 37px;
      div {
        height: 37px;
        border-top: 1px solid #e4e1e1;
        flex: 1;
      }
      .left {
        color: #a6a6a6;
        border-right: 1px solid #e4e1e1;
      }
      .right {
        color: #f7aa2e;
      }
    }
  }
  .op {
    opacity: 0;
    transition: all 0.5s linear;
  }
  // 遮罩层
  .zhe {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
  }
}
</style> */